@import '@/uni_modules/uni-scss/variables.scss';

// 重置按钮样式
// button {
// 	padding-left: 0;
// 	padding-right: 0;
// }
button::after {
	border: unset;
}

// 边框颜色
$uni-border-1: rgba(51, 51, 51, 0.60);
// $uni-border-2: #EDEDED;
// $uni-border-3: #DCDCDC;
// $uni-border-4: #B9B9B9;

// 边框半径默认值
// $uni-radius-root:4px;
// 边框半径断点
// $uni-radius: map-deep-merge(
//   (
//     0: 0,
//     null: $uni-radius-root,
//     'lg': $uni-radius-root * 2,
//     'xl': $uni-radius-root * 6,
//     'pill': 9999px,
//     'circle': 50%
//   ),
// );

/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 16px;
// $uni-spacing-lg: 30px;

// 主色
$uni-primary: #FA4543;

// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #16BE62;
$uni-warning: #FCB513;
$uni-error: #FA4543;

/* 背景颜色 */
$uni-bg-color: #F5F5F5;

// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #333333; 			// 主要文字
$uni-base-color: #333333E6;			// 常规文字
$uni-secondary-color: #33333399;	// 次要文字
$uni-extra-color: #c7c7c7;			// 辅助说明

/* 边框颜色 */
$uni-border-color: #3333334C;

// 字体家族
$body-font-family: 'PingFang SC', 'Roboto', sans-serif !default;


.absolute {position:absolute;}
.relative {position:relative;}

.box-border {box-sizing:border-box;}
.box-content {box-sizing:content-box;}

.flex {display:flex;}
.flex-col {display:flex;flex-direction:column;}
.flex-1 {flex:1;}
.flex-auto {flex: 1 1 auto;}
.justify-center {justify-content:center;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.justify-end{justify-content: flex-end;}
.item-center {align-items:center;}
.center {justify-content:center;align-items:center;}
.flex-shrink {flex-shrink:0;}
.inline-flex {display:inline-flex;}
.flex-nowrap {flex-wrap:nowrap;}
.flex-wrap {flex-wrap:wrap;}

.h-full {height:100%;}
.w-full {width:100%;}
.full-parent {width:100%;height:100%;}
.h-screen {height:100vh;}
.w-screen {width:100vw;}
.full-screen {width:100vw;height:100vh;}

.text-bold {font-weight:600;}
.text-underline {text-decoration-line: underline;}
.text-throughline {text-decoration-line: line-through;}

.transparent {background-color:transparent;}

.overflow-auto {overflow:auto;}
.overflow-hidden {overflow:hidden;}
.whitespace-nowrap {white-space:nowrap;}
.break-all {word-break: break-all;}

.align-middle {vertical-align:middle;}

:root {
	.uni-list {background-color: transparent !important;}
}

/* 背景色 */
.uni-bg-color {background-color: $uni-bg-color;}
.uni-bg-white {background-color: #FFF;}
.bg-default {background-color: $uni-bg-color;}
.bg-disabled {background-color: rgba(51, 51, 51, 0.60);}

.bg-default-c {
	background-color: $uni-bg-color;
}

/* 品牌色 */
$primary: #FA4543;
@each $i in $primary {
	.bg-primary {background-color: $i;}
	.color-primary {color: $i;}
	.color-primary-i {color: $i !important;}
	.border-primary {border: 1px solid $i;}
}

/* 辅助色 */
$secondary: (
	(title: 'secondary-warning', color: #FCB513),
	(title: 'secondary-success', color: #16BE62),
	(title: 'secondary-info', color: #00AEFF),
	(title: 'hint', color: rgba(51, 51, 51, 0.60)),
);
@for $i from 1 through length($secondary) {
	$item: nth($secondary, $i);
	$title: map-get($map: $item, $key: title);
	$color: map-get($map: $item, $key: color);
	.bg-#{$title} {background-color: $color;}
	.color-#{$title} {color: $color;}
	.border-#{$title} {border: 1px solid $color;}
}

.c3 {color:#333333;}
.c3-6 {color:rgba(51,51,51,0.6);}
.c9 {color:#999999;}
.cf {color:#ffffff;}

.text-color-regular {color:#333333;}
.text-color-secondary {color:rgba(51, 51, 51, 0.90);}
.text-color-hint {color:rgba(51, 51, 51, 0.60);}
.text-color-disabled {color:rgba(51, 51, 51, 0.30);}

@for $i from 0 through 100 {
	.m-#{$i} {margin:$i + px;}
	.mx-#{$i} {margin-left:$i + px;margin-right:$i + px;}
	.my-#{$i} {margin-top:$i + px;margin-bottom:$i + px;}
	.mt-#{$i} {margin-top:$i + px;}
	.mb-#{$i} {margin-bottom:$i + px;}
	.mr-#{$i} {margin-right:$i + px;}
	.ml-#{$i} {margin-left:$i + px;}
	.p-#{$i} {padding:$i + px;}
	.px-#{$i} {padding-left:$i + px;padding-right:$i + px;}
	.py-#{$i} {padding-top:$i + px;padding-bottom:$i + px;}
	.pt-#{$i} {padding-top:$i + px;}
	.pb-#{$i} {padding-bottom:$i + px;}
	.pr-#{$i} {padding-right:$i + px;}
	.pl-#{$i} {padding-left:$i + px;}
	.w-#{$i} {width:$i + px;}
	.h-#{$i} {height:$i + px;}
	.size-#{$i} {width:$i + px; height:$i + px;}
	.z-#{$i} {z-index: $i;}
	.left-#{$i} { left: $i; }
	.right-#{$i}{ right: $i;}
	.top-#{$i}{ top: $i;}
	.bottom-#{$i}{ bottom: $i;}
}

/* 字体大小 */
$size: 0, 8, 10, 11, 12, 13, 14, 15, 16, 18, 20, 21, 24, 32, 36, 40;
@each $i in $size {
	.fs-#{$i} {font-size: $i + px;}
}

$radius: 0, 4, 8, 12, 14, 15, 16, 20, 23;
@each $i in $radius {
	.radius-#{$i} {border-radius: $i + px;}
	.radius-tl-#{$i} {border-top-left-radius: $i + px;}
	.radius-tr-#{$i} {border-top-right-radius: $i + px;}
	.radius-bl-#{$i} {border-bottom-left-radius: $i + px;}
	.radius-bl-#{$i}-i {border-bottom-left-radius: $i + px !important;}
	.radius-br-#{$i} {border-bottom-right-radius: $i + px;}
	.radius-br-#{$i}-i {border-bottom-right-radius: $i + px !important;}
}

/* 行高*/
$leading: 14, 17, 20, 22, 38, 46;
@each $i in $leading {
	.leading-#{$i} {line-height: $i + px;}
}

/* 字体粗细 */
$fontWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
@each $i in $fontWeight {
	.font-#{$i} {font-weight:$i;}
}

.font-thin {font-weight:100;}
.font-extralight {font-weight:200;}
.font-light {font-weight:300;}
.font-normal {font-weight:400;}
.font-medium {font-weight:500;}
.font-semibold {font-weight:600;}
.font-bold {font-weight:700;}
.font-extrabold {font-weight:800;}


.two-lines-ellipsis {
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.w50{
	width: 45%;
	margin-right: 0;
}

.triangle{
	width: 0;
	height:0;
	border-width: 8px;
	border-style: solid;
	border-color: $primary transparent transparent transparent;
}